<template>
  <!-- 出入库管理 -->
  <div class="wrap">
    <!-- <topbar></topbar> -->
    <a-tabs default-active-key="1" :tabBarStyle="tabBarStyle" size="large">
      <a-tab-pane tab="入库审核" key="1">
        <div class="topbar">
          <inpageheader ></inpageheader>
          <div class="refresh" @click="loadData(1)">
            <a-icon type="redo" />
            <span>刷新</span>
          </div>
        </div>

        <div class="top">
          <!-- <a-icon v-if="iconType == 'double-right'" :type="iconType" @click="iconShowChange" class="up-icon" /> -->
          <div class="pharmacy">
            <pharmacySelect class="pharmacySelect" @changepharmacy="changepharmacy"></pharmacySelect>
          </div>
          <div class="content">
            <content-form ref="content_form"  class="contentitem"
                          @detail="detaildatachangein"   @isShow="isDetailShow" tabtitle="入库审核" />
            <!-- detaildatain -->
            <!--  v-if="detaildatain" -->
            <div class="bottom" >
              <detail class="bottomitem" @reLoadData="$refs.content_form.getData()"  :isShow="isShow"
                      :item="detaildatain"></detail>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div class="usermenu">
      <user-menu class="user-menu" :theme="theme" />
    </div>
  </div>
</template>


<script>

// import topbar from './com/topbar.vue'

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState, mapActions } from 'vuex'
// import UserMenu from '@/components/tools/UserMenu'
// import EventBus from '@/utils/event-bus'

export default {
  name: 'MyTaskList',
  data() {
    return {
      isShow:'', //详情数据是否显示
      pharmacyName: '',
      // 详情数据
      detaildatain: null,
      // 出库详情数据
      detaildataout: null,
      // detaildatainout: null,
      tabBarStyle: {
        lineHeight: '60px',
        margin: 0,
        borderRadius: '15px',
        float: 'left',
        width: '100%',
        marginBottom: '15px',
        // borderBottom: '15px solid #f1f1f1',
        fontSize: '20px',
        fontWeight: 'bold',
        backgroundColor: 'white !important',
        boxSizing: 'border-box',
        padding: '0 20px',
      },
    }
  },
  components: {
    // ContentForm,
    // inpageheader,
    // pharmacySelect,
    // detail,
    // detailout,
    // contentOut,
    // contentInOut,
    // UserMenu,
  },
  computed: {
    ...mapState({
      theme: (state) => state.app.theme,
    }),
  },
  mounted() {
  },
  methods: {


    //是否显示详情
    isDetailShow(data){
      this.isShow = data
    },

    // onChange(i) {
    //   this.checkBox = this.choice[i].value
    // },
    loadData(type) {
      if (type == 1) {

        if (this.$refs.content_form.activeKey == 'a' && this.pharmacyName != null && this.pharmacyName!=undefined) {
          this.$refs.content_form.getData(this.pharmacyName)
        } else {
          this.$refs.content_form.activeKey = 'a'
        }
      }
      if (type == 2) {
        if (this.$refs.content_out.activeKey == 'b' && this.pharmacyName != null && this.pharmacyName!=undefined ) {
          this.$refs.content_out.getData(this.pharmacyName)
        } else {
          this.$refs.content_out.activeKey = 'a'
        }
      }
      if (type == 3) {
        if (this.$refs.content_in_out.activeKey == 'all' && this.pharmacyName != null && this.pharmacyName!=undefined) {
          this.$refs.content_out.getData(this.pharmacyName)
        } else {
          this.$refs.content_out.activeKey = 'a'
        }
      }
    },
    // iconShowChange() {
    //   this.iconType = this.iconType == 'double-right' ? 'double-left' : 'double-right'
    // },
    detaildatachangein(data) {
      console.log("我看看这data里面有啥",data)
      this.detaildatain = data
    },
    detaildatachangeout(data) {
      this.detaildataout = data
    },
    detaildatachangeinout(data) {
      this.detaildataout = data
    },
    changepharmacy(data) {
      EventBus.$emit('get-suppliers')
      this.pharmacy = data
      // 接口方说 只要区分住院和门诊 不区分药房
      this.pharmacyName = data.code
      if (this.$refs.content_form) {
        this.$refs.content_form.getData()
        this.$refs.content_form.getReviewedNum()
      }
      if (this.$refs.content_out) {
        this.$refs.content_out.getData()
      }
      if (this.$refs.content_in_out) {
        this.$refs.content_in_out.getData()
        // this.$refs.content_in_out.getSuppliers()
      }
    },
  },
}
</script>


<style lang="less" scoped>
.flex-bet() {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}
.up-icon {
  padding: 19px;
  background-color: #fff;
  box-shadow: 0px 8px 25px 0px rgba(211, 215, 221, 0.4);
  border-radius: 3px 3px 4px 3px;
}
.wrap {
  display: flex;
  flex-direction: column;
  background-color: white;
  position: relative;
  width: 100%;
  // .ant-tabs-bar{
  //   margin: 0 !important;
  //   border-bottom: 10px solid #f1f1f1 !important;
  // }
  .topbar {
    position: relative;
    .refresh {
      position: absolute;
      right: 30px;
      top: 0;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
    }
  }
  .top {
    display: flex;
    // height: auto;
    .pharmacy {
      height: auto;
      margin-bottom: 15px;
    }
    .content {
      width: 100%;
      // border: 1px solid red;
      .contentitem {
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(211, 215, 221);
        margin-bottom: 20px;
        margin-right: 20px;
        margin-left: 20px;
      }
      .bottom {
        width: 100%;
        .bottomitem {
          border-radius: 10px;
          box-shadow: 0px 0px 10px rgba(211, 215, 221);
          margin-top: 10px;
          margin-bottom: 20px;
          margin-right: 20px;
          margin-left: 20px;
        }
      }
    }
  }

  .usermenu {
    position: absolute;
    height: 60px;
    line-height: 60px;
    top: 0;
    right: 30px;
    width: 300px;
    .user-menu {
      width: 300px;
      height: 60px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
}
.ant-tabs {
  // margin: 4px 0 0;
  border: none;
  background-color: #f1f1f1 !important;
}
.ant-tabs-content-animated {
  background-color: white !important;
}
.ant-tabs-tabpane {
  background-color: white;
  border-radius: 15px;
}
/deep/ .ant-tabs-ink-bar {
  height: 5px !important;
}
</style>